$.fn.extend({
    initUser() {
        let userList = JSON.parse(localStorage.getItem("user") || "{}");
        if (userList.uname) {
            this.append(`
            <div class="user fl">
                        <a href="#">wangqi</a>
                        <span></span>
                        <div>
                            <img src="./images/截屏2021-07-07 下午4.14.11.png" alt="">
                            <p>
                                <em>管理账号</em>
                                <em class="close_user">退出登录</em>
                            </p>
                        </div>
                    </div>
                    <div class="pl_register fl"><a href="#">消息</a></div>
            </div>
            `);
        } else {
            this.append(`
            <div class="fl">
                <div class="wcm_ali fl">
                    欢迎来到阿里巴巴
                </div>
                <div class="pl_login ms_top fl">
                    <img src="./images/hongbao.png" alt="">
                    <a href="login.html">请登录</a>
                    <div class="pl_l_box">
                        <p>先登录在采购，享受更多权益！</p>
                        <p>
                            <em>领取新人红包</em>
                            <em>享受新人权益</em>
                            <em>更多精准推荐</em>
                            <em>记录浏览足迹</em>
                        </p>
                        <em class="close_plbox">X</em>
                    </div>
                </div>
                <div class="pl_register fl"><a href="reg.html">免费注册</a></div>
             </div>
            `);

        }
        this.find(".close_user").on("click", () => {
            localStorage.removeItem("user");
            location.reload(true);
        })
    },
    initHTML() {
        var ckshop;
        let sId = location.search.split("?")[1].split("=")[1];
        $.ajax({
            url: `http://127.0.0.1:8080/ckshop/:${sId}`
        }).then(function (res) {
            let { data } = res;
            ckshop = data;
            //初始化标题
            $("title").text(ckshop.sName);
            //初始化图片
            $(".c1_top").children().eq(0).text(ckshop.sName);
            $(".md-img").attr("src", ckshop.sImg[0]);
            $(".big-arrow").find("img").attr("src", ckshop.sImg[0]);
            $("video").attr({
                src: ckshop.sImg[5],
                poster: ckshop.sImg[2]
            })
            for (let i = 0; i < 5; i++) {
                $(".small-img").children().eq(i).find("img").attr("src", ckshop.sImg[i])
            }
            //初始化价格数量等
            let str = ``;
            let str1 = ``;
            for (let i = 0; i < ckshop.sType.length; i++) {
                str += `
                    <p>
                        <span>${ckshop.sType[i].type}</span>
                        <span>${ckshop.sPrice}.00元</span>
                        <span>${ckshop.sType[i].num}可售</span>
                        <span>
                            <i class="down">-</i>
                            <input type="text" placeholder="0" value="0">
                            <i class="up">+</i>
                        </span>
                     </p>
                `;
                str1 += `<i>${ckshop.sType[i].type}<em>（1）</em></i>`;

            }
            $(".c1s_show").find("dd").html(str);
            $(".myshop").find("p").append(str1);

        })
        $(".add_myshop").on("click", () => {
            let num = parseInt($(".myprice").find("span").eq(0).text());
            if (num) {  //如果有值 就说明买了商品 可以添加到购物车
                let uId = JSON.parse(localStorage.getItem("user") || "[]").uId;
                // alert(uId)
                if (uId) { //已经登
                    let sType = [];
                    for (let i = 0; i < $(".c1s_show dd").children().length; i++) {
                        sType.push({
                            type: $(".c1s_show dd").children().eq(i).children().eq(0).text(),
                            num: $(".c1s_show dd").children().eq(i).find("input").val()
                        })
                    }
                    //准备参数
                    let shopData = {
                        uId,
                        cName: ckshop.sName,
                        cPrice: ckshop.sPrice,
                        cNum: $(".myprice").find("span").eq(0).text(),
                        cImg: ckshop.sImg[0],
                        cType: JSON.stringify(sType)
                    }
                    $.ajax({
                        url: "http://127.0.0.1:8080/addCarts",
                        type: "post",
                        data: shopData
                    }).then(function (res) {
                        let { message, code } = res;
                        if (code == 200) {
                            $(".goShop").show();
                        }
                    })
                } else {
                    alert("未登录，请先登录！")
                }
            } else {
                alert("您还未购买商品！")
            }
        })
    },
    mouseTop() {
        this.on("mouseenter", function () {
            $(this).find("div").show();
            $(this).find("span").css({
                top: 0,
                right: -5,
                transform: "rotate(180deg)"
            })
        }).on("mouseleave", function () {
            $(this).find("div").hide();
            $(this).find("span").css({
                top: 2,
                right: 8,
                transform: "rotate(0deg)"
            })
        })
    },
    userMouseTop() {
        this.on("mouseenter", function () {
            $(this).find("div").show();
            $(this).find("span").css({
                top: -3,
                right: -26,
                transform: "rotate(180deg)"
            })
        }).on("mouseleave", function () {
            $(this).find("div").hide();
            $(this).find("span").css({
                top: 0,
                right: -14,
                transform: "rotate(0deg)"
            })
        })
    },
    //三级菜单 鼠标移入效果
    mouseMenu() {
        this.on("mouseenter", function () {
            $(this).children().eq(0).show();
        }).on("mouseleave", function () {
            $(this).children().eq(0).hide();
        })
    },
    mouseVideo() {
        this.on("mouseenter", () => {
            this.attr("controls", "controls");
        }).on("mouseleave", () => {
            this.removeAttr("controls");
        })
        this.next().next().on("click", () => {
            this.hide();
            this.next().next().hide();
            this.parent().find("img").show();
            $(this)[0].pause();
        })
        this.next().on("click", () => {
            this.show();
            this.next().next().show();
            this.prev().hide();
            this.parent().find("img").hide();
            this.parent().next().hide();
            $(this)[0].play();
        })
    },
    fangdajing() {
        class FangDa {
            constructor(a) {
                this.$mdImg = a;
                this.$mdArrea = a.next();
                this.$bigArrea = a.parent().next();
                this.$bigImg = a.parent().next().children().eq(0);
                this.$smallImg = a.parent().parent().next().find("img");
            }
            mouseMdImg() {
                this.mouseSmIMg();
                this.$mdImg.parent().on("mousemove", (e) => {
                    if (this.$mdImg.css("display") != "none") {
                        // this.$mdArrea.next().next().hide();
                        this.$mdArrea.show();
                        this.$bigArrea.show();
                        let disx = e.pageX - this.$mdImg.offset().left - 20;
                        let disy = e.pageY - this.$mdImg.offset().top - (this.$mdArrea.height() / 2);
                        if (disx <= 35) {
                            disx = 35
                        }
                        if (disy <= 0) {
                            disy = 0
                        }
                        if (disx >= 232) {
                            disx = 232
                        }
                        if (disy >= this.$mdImg.height() - this.$mdArrea.height()) {
                            disy = this.$mdImg.height() - this.$mdArrea.height()
                        }
                        this.$mdArrea.css({
                            top: disy,
                            left: disx
                        })
                        this.$bigImg.css({
                            top: disy * -3,
                            left: (disx - 35) * -3
                        })
                    }
                })
                this.$mdImg.parent().on("mouseleave", (e) => {
                    if (this.$mdImg.css("display") != "none") {
                        this.$mdArrea.next().next().show();
                        this.$mdArrea.hide();
                        this.$bigArrea.hide();
                    }
                })
            }
            mouseSmIMg() {
                let self = this;
                this.$smallImg.on("mouseenter", function () {
                    let tag = self.$mdImg.next().next();
                    tag.hide();
                    tag.next().next().hide();
                    tag.parent().find("img").show();
                    $(tag)[0].pause();
                    self.$mdImg.attr("src", $(this).attr("src"));
                    self.$bigImg.attr("src", $(this).attr("src"));
                })
            }

        }

        new FangDa(this).mouseMdImg();
    },
    addShop() {
        let a = 0;
        let b = 0;
        let c = 0;
        let sum = 0;
        let allPrice = 0;
        let self = this;
        if (this.find("input").val() == 0) {
            this.find(".down").css({
                cursor: "not-allowed",
            });
            this.find(".down").on("mouseenter", function () {
                $(this).css("backgroundColor", "#eee")
            }).on("mouseleave", function () {
                $(this).css("backgroundColor", "#fff")
            })
        } else {
            this.find(".down").css("cursor", "pointer");
        }
        this.find(".up").on("mouseenter", function () {
            $(this).css("border", "1px solid red")
            $(this).prev().css({
                border: "1px solid red",
                borderRight: 0
            })
        }).on("mouseleave", function () {
            $(this).css("border", "1px solid #ccc")
            $(this).prev().css({
                border: "1px solid #ccc",
                borderRight: 0,
                borderLeft: 0
            })
        })
        function add(_zhege) {
            if ($(_zhege).next().val() == 0) {
                $(_zhege).css({
                    cursor: "not-allowed",
                })
            } else {
                // self.find(".myshop").hide();
                self.find(".myprice").css({
                    marginTop: 0
                });
                $(_zhege).css("cursor", "pointer");
                $(_zhege).next().val($(_zhege).next().val() - 1);
                if ($(_zhege).parent().parent().index() == 0) {
                    a--;
                } else if ($(_zhege).parent().parent().index() == 1) {
                    b--;
                } else {
                    c--;
                }
                sum = a + b + c;
                self.find(".myshop").children().eq(1).text(sum + "件");
                self.find(".myprice").children().eq(0).find("span").eq(0).text(sum);
                self.find(".myprice").children().eq(0).find("span").eq(1).text(sum * 95 + ".00");
            }
        }
        self.find(".c1s_show").find(".down").on("click", function () {
            if ($(this).next().val() != 0) {
                self.find(".myshop").hide();
                self.find(".myprice").css({
                    marginTop: 0
                });
            }
            add(this);
        })

        function up(_zhege) {
            self.find(".myprice").css("display", "flex");
            $(_zhege).prev().val(parseInt($(_zhege).prev().val()) + 1);
            if ($(_zhege).parent().parent().index() == 0) {
                a++;
            } else if ($(_zhege).parent().parent().index() == 1) {
                b++;
            } else {
                c++;
            }
            sum = a + b + c;
            self.find(".myprice").children().eq(0).find("span").eq(0).text(sum);
            self.find(".myshop").children().eq(1).text(sum + "件");
            self.find(".myprice").children().eq(0).find("span").eq(1).text(sum * 95 + ".00");
        }
        self.find(".c1s_show").find(".up").on("click", function () {
            self.find(".myshop").hide();
            self.find(".myprice").css({
                marginTop: 0
            });
            up(this);
        })
        self.find(".myshop").prev().on("click", function () {
            self.find(".myshop").css({
                display: "flex"
            });
            // self.find(".myprice").css({
            //     // marginTop: 40
            // });
            self.find(".myshop").children().eq(1).text(sum + "件")
            if (a != 0) {
                self.find(".myshop").children().eq(2).children().eq(0).show();
                self.find(".myshop").children().eq(2).children().eq(0).find("em").text("(" + a + ")")
            } else {
                self.find(".myshop").children().eq(2).children().eq(0).hide();
            }
            if (b != 0) {
                self.find(".myshop").children().eq(2).children().eq(1).show();
                self.find(".myshop").children().eq(2).children().eq(1).find("em").text("(" + b + ")")
            } else {
                self.find(".myshop").children().eq(2).children().eq(1).hide();
            }
            if (c != 0) {
                self.find(".myshop").children().eq(2).children().eq(2).show();
                self.find(".myshop").children().eq(2).children().eq(2).find("em").text("(" + c + ")")
            } else {
                self.find(".myshop").children().eq(2).children().eq(2).hide();

            }
        })

        self.find(".myshop").find("i").on("mouseenter", function () {
            let num = $(this).index() == 0 ? a : $(this).index() == 1 ? b : c;
            let txt = `<span class="cont" >
                    <i class="down">-</i>
                    <input type="text" placeholder="0" value="${num}">
                    <i class="up">+</i>
                </span>`
            if ($(this).index() == 2) {
                txt = `<span class="cont" style="left:57px" >
                    <i class="down">-</i>
                    <input type="text" placeholder="0" value="${num}">
                    <i class="up">+</i>
                </span>`
            }
            $(this).append(txt);
            self.find(".myshop").find(".down").on("click", function () {
                add(this);
                let tmpINdex = $(this).parent().parent().index();
                if (tmpINdex == 0) {
                    $(this).parent().prev().text("(" + a + ")")
                } else if (tmpINdex == 1) {
                    $(this).parent().prev().text("(" + b + ")")
                } else {
                    $(this).parent().prev().text("(" + c + ")")
                }
                self.find(".c1s_show").find("input").each(function (index, item) {
                    if (index == 0) {
                        $(item).val(a)
                    } else if (index == 1) {
                        $(item).val(b)
                    } else {
                        $(item).val(c)
                    }
                })
            })
            self.find(".myshop").find(".up").on("click", function () {
                up(this);
                if ($(this).index() == 0) {
                    $(this).parent().prev().text("(" + a + ")")
                } else if ($(this).index() == 1) {
                    $(this).parent().prev().text("(" + b + ")")
                } else {
                    $(this).parent().prev().text("(" + c + ")")
                }
                self.find(".c1s_show").find("input").each(function (index, item) {
                    if (index == 0) {
                        $(item).val(a)
                    } else if (index == 1) {
                        $(item).val(b)
                    } else {
                        $(item).val(c)
                    }
                })
            })
            $(".myshop").find("input").on("input", function () {
                let num = $(this).val();
                if ($(this).parent().parent().index() == 0) {
                    a = num;
                } else if ($(this).parent().parent().index() == 1) {
                    b = num;
                } else {
                    c = num;
                }
                self.find(".myshop").find(".up").click();
                self.find(".myshop").find(".down").click();
            })
            self.find(".myshop").show();
        }).on("mouseleave", function () {
            $(this).find(".cont").remove();
        })

        $(".c1s_m").find("input").on("input", function () {
            let num = $(this).val();
            if ($(this).parent().parent().index() == 0) {
                a = num;
            } else if ($(this).parent().parent().index() == 1) {
                b = num;
            } else {
                c = num;
            }
            self.find(".c1s_show").find(".up").click();
            self.find(".c1s_show").find(".down").click();
        })
    },
    autoShop() {
        class SlideShow {
            constructor(aa) {
                this.$lis = aa.find("ul");
                this.$spans = aa.find(".arr-fk span");
                this.$arrow = aa.find(".arrow")
                this.liIndex = 0;
                this.spanIndex = 0;
                this.timer = null;

            }
            autoPlay() {
                this.liIndex++;
                if (this.liIndex == 4) {
                    this.$lis.parent().css("left", "0");
                    this.liIndex = 1;
                }
                this.$lis.parent().stop(true).animate({ left: this.liIndex * -130 });
                this.spanIndex++;
                if (this.spanIndex == 3) {
                    this.spanIndex = 0;
                }
                this.$spans.eq(this.spanIndex).addClass("current").siblings().removeClass("current");
            }
            setInterv() {
                this.timer = setInterval(() => {
                    this.autoPlay();
                }, 1500);
                this.mouseEnter();
            }
            mouseEnter() {
                let self = this;
                this.$arrow.children().on("mouseenter", function () {
                    clearInterval(self.timer);
                }).on("mouseleave", function () {
                    self.timer = setInterval(() => {
                        self.autoPlay();
                    }, 1500);
                }).on("click", function () {
                    if (this.className == "arrow_l" && self.liIndex != 0) {
                        self.liIndex = self.spanIndex = self.liIndex - 2;
                        self.autoPlay();
                    }
                    if (this.className == "arrow_r" && self.liIndex != 2) {
                        self.liIndex = self.spanIndex = self.liIndex;
                        self.autoPlay();
                    }
                })
                this.$spans.on("mouseenter", function () {
                    clearInterval(self.timer);
                    $(this).addClass("current").siblings().removeClass("current");
                    self.liIndex = self.spanIndex = $(this).index() - 1;
                    self.autoPlay();
                })
            }


        }
        new SlideShow(this).setInterv();
    },
    pingjia() {

    },
    tabMenu() {
        let self = this;
        this.find(".con_top").children().on("click", function () {
            self.children().eq($(this).index() + 1).show().siblings().hide();
            $(this).addClass("con3_current").siblings().removeClass("con3_current");
            $(this).parent().show();

            if ($(this).index() == 1) {


            }
        })
    },
    pingjia() {
        class TabPingJia {
            constructor(el) {
                this.$allRadio = el.find(".appraiss_tab input[type='radio']");
                this.$check = el.find(".appraiss_tab input[type='checkbox']");
                this.$shang = el.find(".page .shang");
                this.$xia = el.find(".page .xia");
                this.$count = el.find(".page .count");
                this.$all = el.find(".page .all");
                this.$txt = el.find(".page input[type='text']");
                this.$btn = el.find(".page .btn");
                this.$lis = el.find("li");
                this.allPage = 0;
                this.curPage = 1;
            }
            iniii() {
                this.$check.on("click", () => {
                    let arr = [];
                    this.$allRadio.off();
                    this.$shang.off();
                    this.$xia.off();
                    this.$count.off();
                    this.$all.off();
                    this.$txt.off();
                    this.$btn.off();
                    this.$lis.off();
                    if (this.$check.prop("checked")) {
                        this.$lis.each((index, item) => {
                            let str = $(item).find(".text").text();
                            if (str.indexOf("未及时") == -1) {
                                arr.push(item);
                            }
                        })
                        this.init($(arr));
                    } else {

                        // this.clickRadio().stop();
                        // this.public().stop();
                        // this.locationPage().stop();
                        // this.clickPage().stop();
                        this.init(this.$lis);
                    }
                })
                this.$check.click();
            }


            init(el) {
                let a = 0
                let b = 0;
                let c = 0;
                el.each((index, item) => {
                    let $spans = $(item).find(".xingxing span");
                    if ($spans.length == 4 || $spans.length == 5) {
                        a++;
                    } else if ($spans.length == 3) {
                        b++;
                    } else {
                        c++;
                    }
                })
                this.$count.parent().parent().find(".five").find("span").text("(" + a + ")");
                this.$count.parent().parent().find(".three").find("span").text("(" + b + ")");
                this.$count.parent().parent().find(".one").find("span").text("(" + c + ")");
                this.public(el);
                this.clickRadio(el)

            }

            //点击radio
            clickRadio(el) {
                let self = this;
                this.$allRadio.on("click", function () {
                    self.$shang.off();
                    self.$xia.off();
                    let list1 = [];
                    let list2 = [];
                    let list3 = [];
                    el.each((index, item) => {
                        let $spans = $(item).find(".xingxing span");
                        if ($spans.length == 4 || $spans.length == 5) {
                            list1.push(item);
                        } else if ($spans.length == 3) {
                            list2.push(item);
                        } else {
                            list3.push(item);
                        }
                    })
                    self.$allRadio.each((aa, bb) => {
                        if ($(this).parent().attr("class") != $(bb).parent().attr("class")) {
                            $(bb).removeAttr("checked")
                        }
                    })
                    if ($(this).parent().attr("class") == "five") {
                        // console.log(1);
                        self.public($(list1));
                    } else if ($(this).parent().attr("class") == "three") {
                        // console.log(2);
                        self.public($(list2));
                    } else if ($(this).parent().attr("class") == "one") {
                        // console.log(3);
                        self.public($(list3));
                    } else {
                        self.public(el);
                    }
                })
            }



            public(ele) {
                this.$lis.css("display", "none");
                this.allPage = Math.ceil(ele.length / 10);
                this.curPage = 1;
                this.$count.html("");
                this.$shang.css({
                    color: "#999"
                })
                this.locationPage(ele);
                if (this.allPage > 8) {
                    this.$count.append(`<span class="page_cur">1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                        <i>...</i>
                        <span>${this.allPage}</span>`);
                } else {
                    this.$count.append(`<span class="page_cur">1</span>`);
                    for (let i = 1; i < this.allPage; i++) {
                        this.$count.append(`<span>${i + 1}</span>`);
                    }
                }

                this.clickPage(ele);
            }

            locationPage(ele) {
                let scrTop = this.$allRadio.parents(".appraiss_tab").offset().top;
                $("html").animate({ "scrollTop": scrTop })
                ele.each((index, item) => {
                    if ((this.curPage - 1) * 10 <= index && index < this.curPage * 10) {
                        $(item).css("display", "flex");
                    } else {
                        $(item).css("display", "none");
                    }
                })
                this.$count.find("span").each((index, item) => {
                    if ($(item).text() == this.curPage) {
                        $(item).addClass("page_cur").siblings().removeClass("page_cur");
                    }
                })
                if (this.curPage != 0 && this.curPage % 7 == 0) {
                    let str = `<span>1</span>
                    <i>...</i>
                    <span class="page_cur">${this.curPage}</span>`;
                    let n = 0;
                    if (this.curPage + 7 <= this.allPage) {
                        n = 7;
                    } else {
                        n = this.allPage - this.curPage;
                    }
                    for (let m = 1; m <= n; m++) {
                        if (this.curPage <= this.allPage) {
                            str += ` <span>${this.curPage + m}</span>`
                        }
                    }
                    this.$count.html(str);
                }

            }
            //点击上一页 下一页 某也功能
            clickPage(ele) {
                let self = this;
                //上
                this.$shang.on("click", () => {
                    if (this.curPage > 1) {
                        this.curPage--;
                        this.locationPage(ele);
                        if (this.curPage == 1) {
                            this.$shang.css({ color: "#999" })
                        }
                    }
                })
                this.$xia.on("click", () => {
                    if (this.curPage < this.allPage) {
                        this.curPage++;
                        this.locationPage(ele);
                        if (this.curPage > 1) {
                            this.$shang.css({ color: "#000" })
                        }
                        if (this.curPage == this.allPage) {
                            this.$xia.css({ color: "#999" })
                        } else {
                            this.$xia.css({ color: "#000" })
                        }
                    }
                })

                this.$count.on("click", "span", function () {
                    self.curPage = parseInt($(this).text());
                    self.locationPage(ele);
                })

                //跳转到第几页
                this.$btn.on("click", function () {
                    let num = self.$txt.val();
                    if (num) {
                        self.curPage = num;
                        self.locationPage(ele);
                    }
                })
            }

        }
        new TabPingJia(this).iniii();
    },
    bigImg() {
        this.find("img").each((index, item) => {
            item.flag = true;
        })
        this.find("img").on("click", function () {
            if (this.flag) {
                let $img = $(this).clone();
                $img.css({
                    width: 500,
                    height: 420
                })
                $img.insertBefore($(this).parent().next());
                this.flag = false;
            } else {
                $(this).parent().next().remove();
                this.flag = true;
            }
        })

    },
    dragBox() {
        this.find(".goShop_top").on("mousedown", (e) => {
            let disx = e.pageX - this.position().left;
            let disy = e.pageY - this.position().top;

            $(document).on("mousemove", (e) => {
                // console.log(1);
                let $x = e.pageX - disx;
                // console.log(e.pagex);
                let $y = e.pageY - disy;
                if ($x <= 0) {
                    $x = 0
                }
                if ($x >= document.documentElement.clientWidth - this.width()) {
                    $x = document.documentElement.clientWidth - this.width();
                }
                if ($y <= 0) {
                    $y = 0
                }
                if ($y >= document.documentElement.clientHeight - this.height()) {
                    $y = document.documentElement.clientHeight - this.height();
                }
                this.css({
                    left: $x,
                    top: $y
                })
            })
            $(document).on("mouseup", () => {
                $(document).off();
            })
        })
        this.find(".goShop_top").children().eq(1).on("click", () => {
            this.hide();
        })
        this.find(".goShop_con").children().eq(1).children().eq(1).on("click", () => {
            this.hide();
        })
    },
    addMyShop() {

    },
    mouseCe() {
        this.children().on("mouseenter", function () {
            $(this).children().eq(1).show();
        }).on("mouseleave", function () {
            $(this).children().eq(1).hide();
        })
        this.find(".go_top").on("click", function () {
            $("html").animate({ "scrollTop": 0 })
        })
    }

})
$(function () {
    $(".top_l").initUser();
    $("body").initHTML();
})
window.onload = function () {
    $(".user").userMouseTop();
    $(".ms_top").mouseTop(); //top 栏 的鼠标移入显示，移出隐藏方法
    $(".cl_list_box").mouseMenu();//三级菜单 鼠标移入效果
    $(".son").mouseMenu();//三级菜单 鼠标移入效果
    $("video").mouseVideo(); //视屏播放
    $(".md-img").fangdajing(); //放大镜
    $(".c1s_m").addShop();
    $(".c1s_r").autoShop();
    $(".con_r").tabMenu();
    $(".appraiss_box").pingjia();
    $(".text").bigImg();
    $(".goShop").dragBox();
    $(".sidebar").mouseCe();
}